<!DOCTYPE html>
<html>
  <head>
    <title>test window</title>
    <meta charset="utf-8" />
    <style>
        body,html{width:100%;height:100%;}
        #abc{border:1px solid #9FAC87;width:100px;height:30px;line-height:30px;}
        form{padding:20px;background:#0C32F6}
    </style>
    <script>
      function log(m){
          var p = document.createElement('p');
          p.innerHTML = m;
          document.body.appendChild(p);
      }
    </script>
  </head>
  <body>
    <div id="abc">xxxxxxxxxxxx</div>
    <textarea name="ntp" id="tpl-win">
      <form>
         <input type="text" name="time" data-type="date" data-required="true" data-message="必须设置日期"/>
         <input type="button" name="btn" value="ok"/>
      </form>
    </textarea>
    <script src="../../../define.js"></script>
    <script>
        NEJ.define([
            'base/klass',
            'base/event',
            'base/element',
            'util/template/tpl',
            'util/form/form',
            '../wrapper/card.js'
        ],function(_k,_v,_x,_e,_t,_i,_p,_o,_f,_r,_pro){
            
            _e._$parseTemplate('tpl-win');
            
            _p._$$Card = _k._$klass();
            _pro = _p._$$Card._$extend(_i._$$CardWrapper);
            
            _pro.__initXGui = function(){
                this.__seed_html = 'tpl-win';
            };
            
            _pro.__initNode = function(){
                this.__super();

            };
//            var card = _p._$$Card._$allocate({
//                parent:document.body
//            });
//            _v._$addEvent(
//                    document.body,'click',function(ev){
//                        _v._$stop(ev);
//                        card._$showByReference({
//                            event:ev,
//                            fitable:!0,
//                            align:'bottom right',
//                            target:_x._$get('abc')
//                        });
//                    }
//            );


            // init
            _p._$$Card._$attach('abc',{
                parent:document.body,
                align:'right bottom',
                fixed:!0,
                onbeforeclick:function(opt){
                    var pos = _e._$align(
                            _e._$getPageBox(),
                            {width:222,height:60},
                            'right bottom'
                    );
                    opt.top = pos.top;
                    opt.left = pos.left;
                }
            });
        });
    </script>
  </body>
</html>